<template>
  <div id="app">
    <merge-table 
      :data="tableData" 
      :columns="columns"
      :merge-keys="['name']"
    />
  </div>
</template>

<script>
import MergeTable from './component/index.vue'

export default {
  components: { MergeTable },
  data() {
    return {
      columns: [
        { prop: 'name', title: '姓名' },
        { prop: 'department', title: '部门' },
        { prop: 'position', title: '职位' },
        { prop: 'salary', title: '薪资' }
      ],
      tableData: [
        { name: '张三', department: '技术部', position: '前端', salary: 15000 },
        { name: '张三', department: '技术部', position: '前端', salary: 16000 },
        { name: '王五', department: '技术部', position: '后端', salary: 18000 },
        { name: '张三', department: '产品部', position: '经理', salary: 25000 },
        { name: '钱七', department: '产品部', position: '助理', salary: 12000 }
      ]
    }
  }
}
</script>
